<template>
  <div class="carProduct">
    <div class="searchHead">
      <div class="headLeft" @click='goBack'></div>
      <div class="search" @click='goSearch'>
        <img src="../../assets/image/carProduct/search2.png" />
        <p>请输入你要的商品</p>
      </div>
    </div>
    <div class="allProduct">
      <div class="productClass">
        <ul>
          <li :class="{active:item.ID==selectClass.ID}" v-for='item in firstList' @click='selectType(item)'>{{item.CLASS_NAME}}</li>
        </ul>
      </div>
      <div class="productMain">
        <div class='productBanner'>
          <img :src="selectClass.COVER_IMG" alt="" @click='goShopDetail(selectClass.SERVDETAILID)'/>
        </div>
        <div class="allProDetail" v-if='secondList.length>0'>
          <div class="productItem"  v-for='items in secondList' @click='goShopList(items.ID)'>
            <img :src="items.COVER_IMG" alt="" />
            <p>{{items.CLASS_NAME}}</p>
          </div>
        </div>
        <div class="noData" v-if='secondList.length==0'>
          <img src="../../assets/image/carProduct/noData.png" alt="" />
          <p>该分类下暂无商品</p>
        </div>
      </div>
    </div>
    <!-- <popup v-model='showSearch' width='100%' position='right'>
      <div class="popup2">
        <div class="popHead">
          <div class="headLeft" @click='closePop'></div>
          <div class="search" @click='goSearch'>
            <img src="../../assets/image/carProduct/searchIcon.png" />
            <input type="text" placeholder="请输入搜索的商品" v-model='inputVal'/>
          </div>
          <div class="popSearch" @click='searchCarPro(inputVal)'>搜索</div>
        </div>
        <div class="hotSearch">
          <h1>热门搜索</h1>
          <div class="allHot">
            <span v-for='item in hotSear' @click='searchCarPro(item.KEYWORD)'>{{item.KEYWORD}}</span>
          </div>
        </div>
        <div class="history" v-if='historyArr.length>0'>
          <h1>历史记录</h1>
          <ul>
            <li @click='searchCarPro(item)' v-for='item in historyArr'>{{item}}</li>
          </ul>
        </div>
        <div class="clearHidtory" @click='clearHidtory' v-if='historyArr.length>0'>
          清除历史记录
        </div>
      </div>
    </popup> -->
  </div>
</template>
<script>
/*车品*/
import {Popup} from 'vux';
export default {
  name:"carProduct",
  // 数据
  data(){

    return{
      firstList:'', //车品分类列表
      selectClass:'',  //选择的车品分类
      secondList:''  //车品二级列表
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.getProductList();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    getProductList(){
      //获取车品的列表
      this.$fetchPost('/ServDetailWeb/secondClassLists.action',{}).then(res=>{
          if(res.STATUS_CODE==1){
            this.firstList=res.RESULT_DATA;
            this.selectClass=res.RESULT_DATA[0];
            this.getProductSecond(this.selectClass.ID);
          }
        },err=>{
          console.log(err);
        })
    },
    //获取车品的二级分类
    getProductSecond(id){
      this.$fetchPost('/ServDetailWeb/thirdClassLists.action',{PARENT_ID:id}).then(res=>{
          if(res.STATUS_CODE==1){
            this.secondList=res.RESULT_DATA;
          }
        },err=>{
          console.log(err);
        })
    },
    //切换左侧的车品分类
    selectType(item){
      this.selectClass=item;
      this.getProductSecond(this.selectClass.ID);
    },
    //去搜索
    goSearch(){
      // this.showSearch=true;
      this.$router.push('/productSearch');
    },
    //顶部的banner直接跳转到车品详情
    goShopDetail(id){
      this.$router.push('/shopDetail/'+id);
    },
    //点击二级分类跳转到分类列表
    goShopList(id){
      this.$fetchPost('/ServDetailWeb/getCarProductListBysorto.action',{THIRD_CLASS:id,PAGENO:'1'}).then(res=>{
          if(res.STATUS_CODE==1){
            sessionStorage.setItem('productList',JSON.stringify(res));
            this.$router.push('/productList');
          }
        },err=>{
          console.log(err);
        })
    }
  },
  // 子组件
  components:{
    Popup
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.carProduct{
  height: 100%;
  position: relative;
  .popup2{
    .popHead{
      width: 7.5rem;
      height: 0.9rem;
      background: #f6f6f9;
      .borderBFu(#d9d9d9);
      padding: 0.1rem 0;
      display: flex;
      .headLeft{
        margin: 0.19rem 0.2rem 0.19rem 0.3rem;
        width: 0.3rem;
        height: 0.3rem;
        border:1px solid #999;
        border-width: 0px 0 1px 1px;
        transform:rotate(45deg);
      }
      .search{
        display: flex;
        width: 5.7rem;
        justify-content:center;
        align-items:center;
        background: #eaebed;
        border-radius: 0.1rem;
        input{
          border: 0;
          background: #eaebed;
          margin-left: 0.1rem;
          width: 5rem;
          display: block;
          height:0.55rem;
          outline: medium;
          font-size: 0.26rem;
        }
        img{
          width: 0.32rem;
          height: 0.32rem;
          
        }
      }
      .popSearch{
        font-size: 0.3rem;
        line-height: 0.7rem;
        padding-left: 0.15rem;
      }
    }
    .hotSearch{
      background: #f6f6f9;
      padding-left: 0.2rem;
      margin-top: 0.2rem;
      h1{
        font-size: 0.3rem;
        text-align: left;
        color: #666;
        height: 0.8rem;
        line-height: 0.8rem;
        .borderBFu(#eeeeee);
      }
      .allHot{
        display: flex;
        flex-wrap:wrap;
        padding: 0.2rem 0;
        span{
          font-size: 0.18rem;
          background: #fff;
          padding: 0.13rem;
          border-radius: 0.1rem;
          margin: 0.05rem 0.1rem;
          border:2px solid #ebeded;
        }
      }
    }
    .history{
      background: #f6f6f9;
      margin-top: 0.2rem;
      h1{
        font-size: 0.3rem;
        text-align: left;
        color: #a5a5a5;
        height: 0.8rem;
        line-height: 0.8rem;
        margin-left: 0.2rem;
        .borderBFu(#eeeeee);
      }
      ul{
        li{
          font-size: 0.23rem;
          height: 0.6rem;
          line-height: 0.6rem;
          text-align: left;
          padding-left: 0.3rem;
          .borderBFu(#ccc);
        }
        li:last-child{
          .borderBFu(#f6f6f9);
        }
      }
    }
    .clearHidtory{
      background: #f6f6f9;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #333;
      margin-top: 0.4rem;
    }
  }
  .searchHead{
    position:fixed!important;
    z-index: 999;
    width: 7.5rem;
    height: 0.9rem;
    background: #fff;
    .borderBFu(#d9d9d9);
    padding: 0.1rem 0;
    display: flex;
    .headLeft{
      margin: 0.19rem 0.3rem;
      width: 0.3rem;
      height: 0.3rem;
      border:1px solid #999;
      border-width: 0px 0 1px 1px;
      transform:rotate(45deg);
    }
    .search{
      display: flex;
      width: 6.2rem;
      justify-content:center;
      align-items:center;
      background: #eaebed;
      border-radius: 0.1rem;
      img{
        width: 0.3rem;
        height: 0.3rem;
      }
      p{
        font-size: 0.3rem;
        color: #929296;
        padding-left: 0.05rem;
      }
    }
  }
  .allProduct{
    display:flex;
    height: 100%;
    padding-top: 0.9rem;
    .productClass{
      background: #f8f8f8;
      min-width: 2.1rem;
      width: 2.1rem;
      li{
        background: #f8f8f8;
        font-size: 0.28rem;
        height: 1.2rem;
        color: #333;
        line-height: 1.2rem;
        .borderBFu(#d9d9d9);
      }
      .active{
        background: #fff;
        color:#e42e3b;
        font-size: 0.3rem;
        height: 1.2rem;
        line-height: 1.2rem;
        .borderBFu(#fff);
      }
    }
    .productMain{
      width: 100%;
      padding: 0.2rem;
      position: relative;
      background: #fff;
      .productBanner{
        img{
          height: 2.1rem;
          width: 4.78rem;
        }
      }
      .allProDetail{
        display: flex;
        flex-wrap: wrap;
        .productItem{
          width: 33.3%;
          min-width: 33.3%;
          text-align: center;
          margin-bottom: 0.2rem;
          img{
            width: 1.5rem;
            height: 1.5rem;
            display: block;
            margin: 0 auto;
          }
          p{
            font-size: 0.25rem;
            padding: 0.1rem 0;
            color: #666;
          }
        }
      }
      .noData{
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        img{
          width: 2.1rem;
          height: 1.74rem;
        }
        p{
          font-size: 0.22rem;
          color: #ccc;
        }
      }
    }
    
  }
}
</style>